<template>
  <div>
    <MainHeader></MainHeader>
    <div class="main" >
      <section class="team-area section-padding2" >
        <div class="container">
          <div class="row">
            <div class="col-md-12">
              <div class="section-top text-center">
                <h2>Commodity information</h2>
                <p>商品信息，商品分类，商品获取</p>
              </div>
            </div>
          </div>
        </div>
      </section>

      <h1 style="margin-bottom: 50px">更多等您发现</h1>
      <div style="display: flex;justify-content: flex-end;margin-bottom: 40px;margin-right: 40px"><div><el-input v-model="searchKey"></el-input>   <el-button type="warning" plain @click="searchInfo">搜索</el-button></div></div>
        <div class="MainContainer">
          <div style="display: flex">
          <div class="col-md-3" style="min-height: 100px">
            <div style="padding:15px;font-size: 40px">
            <h2>Categories</h2>
             <h2> <el-radio v-model="radio" label="0" @change="handleChange('全部','0')"><span>全选</span></el-radio></h2>
              <el-radio v-model="radio" label="1" @change="handleChange('3C数码','1')" ><span>3C数码</span></el-radio>
              <el-radio v-model="radio" label="2" @change="handleChange('书籍','2')" ><span>书籍</span></el-radio>
              <el-radio v-model="radio" label="3" @change="handleChange('生活用品','3') "><span>生活用品</span></el-radio>
              <el-radio v-model="radio" label="4" @change="handleChange('服饰','4')"><span>服饰</span></el-radio>
              <el-radio v-model="radio" label="5" @change="handleChange('美妆','5')"><span>美妆</span></el-radio>
              <el-radio v-model="radio" label="6" @change="handleChange('出行','6')"><span>出行</span></el-radio>
              <el-radio v-model="radio" label="7" @change="handleChange('其他','7')"><span>其它</span></el-radio>
            </div>
          </div>
            <div class="col-md-9" style="background-color: rgb(245, 246, 247);border-radius: 10px">
              <h2 style="margin: 40px auto;text-align: center">Show</h2>
              <div  style="display: flex;flex-wrap: wrap;height: auto">
                  <div v-if="products.length===0"> 暂时没有该商品</div>
                <div  v-for="item in products" :index="item.commid" style="padding: 10px;max-width: 400px"  @click="handletoItem(item.commid)">
                  <div>
                    <img :src="item.image" style="width: 270px;height: 320px;border-radius: 10px;margin-left: 40px">
                  </div>
                  <div class="team-footer text-center mt-4">
                    <h3>{{item.commname}}</h3>
                    <h4 style="display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;">{{item.commdesc}}</h4>
                    <h5>{{item.updatetime}}</h5>
                    <h2 style="text-align: center">￥{{item.orimoney}}</h2>
                  </div>
                </div>
              </div>
            </div>
            </div>
          </div>
        </div>

    <MainFooter style="margin-top: 30px"></MainFooter>

  </div>
</template>
<script>
import MainHeader from '../pages/Home/header'
import MainFooter from '../pages/Home/footer'
import {baseUrl} from '../utils/Address'
const Options = ['3C数码', '书籍', '生活用品', '服饰', '美妆', '出行', '其它']
export default{
  components: {
    MainFooter,
    MainHeader
  },
  data () {
    return {
      info:'0',
      searchKey:'',
      products: [],
      radio: '0',
      checked:false,
    }
  },
  mounted () {
    this.handleChange('全部')
  },
  methods: {
    searchInfo(){
      if(this.searchKey===''){
        return false
      }
      this.axios.get(`${baseUrl}/product/search/${this.searchKey}`).then(
        res=>{
          const{data} =res.data
          if(res.data.message==='查询成功'){
            this.products=data
          }
        }
      ).catch(
      )
    },
    handletoItem(val){
      this.$router.push({path:'/item',query: {id:val}})
    },
    handleChange (val,type){
      if(val==='全部'){
        this.radio='0'
      }else{
        this.radio=type
      }
      console.log(val)
      this.axios.get(`${baseUrl}/index/product/` + val).then(
       res=>{
         const {data}=res.data
         this.products=data
         console.log(this.products)
       }
     ).catch(err=>{
       console.log(err)
       this.$message.error('错了呀，获取失败，服务器错误');
     })
    }
  }
  }
</script>

<style scoped>
.main{
  width: 100%;
  min-height: 400px;
}
h1 {
  font-size: 56px;
  text-align: center;
  color: #099e80;
}
.el-input{
  width: 400px;
  margin: 0 auto;
}
span{
  font-size: 18px;
}

</style>
